import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from '@umijs/max';
import { Button } from 'antd';
import { PropsWithChildren } from 'react';
import styles from './index.less';

export const Page: React.FC<
  PropsWithChildren<{ title?: React.ReactNode; back?: boolean }>
> = ({ children, title, back }) => {
  const navigate = useNavigate();
  return (
    <div className={styles.container}>
      {(title || back) && (
        <div className={styles.header}>
          {back && (
            <Button
              size="small"
              type="text"
              icon={<ArrowLeftOutlined />}
              onClick={() => {
                navigate(-1);
              }}
            />
          )}
          {title ? <h1 className={styles.title}>{title}</h1> : undefined}
        </div>
      )}
      <div className={styles.content}>{children}</div>
    </div>
  );
};
